<template>
  <el-row class="dataSourceList1">
    <el-breadcrumb separator-class="el-icon-arrow-right" style="margin-bottom:10px;">
      <el-breadcrumb-item><img style="width: 16px;vertical-align: middle;margin-right: 5px" src="@/assets/indexPage/location.png"/> 数据资源</el-breadcrumb-item>
      <el-breadcrumb-item>
        <span style="font-weight:600;">
           数据资源查询
        </span>
      </el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-form ref="formData" :inline="true" :model="formData" label-width="100px" size="small">
        <el-col class="itemWrap">
          <el-form-item property="time" label="任务开始时间">
            <el-date-picker class="searchItemWidth"
                            v-model="formData.uploadTime"
                            type="datetimerange"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item property="taskId" label="任务编码">
            <el-select class="searchItemWidth" v-model="formData.taskNumber" placeholder="请选择任务编码" clearable @change="taskNumberChange" filterable>
              <el-option v-for="item in taskNumberList" :label="item.inspectTaskCode" :value="item.inspectTaskCode" :key="item.inspectTaskCode"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item property="oriFileName" label="文件名称">
            <el-input placeholder="请输入文件名称" class="searchItemWidth" v-model="formData.oriFileName"></el-input>
          </el-form-item>
          <el-form-item property="remark" label="文件描述" v-if="showAllItems">
            <el-input placeholder="请输入文件描述" class="searchItemWidth" v-model="formData.remark"></el-input>
          </el-form-item>
          <el-form-item property="companyCode" label="单位名称" v-if="showAllItems">
            <el-select class="searchItemWidth" v-model="formData.companyCode" placeholder="请选择单位" @change="companyChange" clearable filterable>
              <el-option v-for="item in tree" :label="item.companyName" :value="item.companyCode"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item property="name" label="场站名称" v-if="showAllItems">
            <el-select class="searchItemWidth" v-model="formData.stationCode" placeholder="请选择场站" @change="stationChange" clearable filterable>
              <el-option v-for="item in stationList" :label="item.stationName" :value="item.stationCode" :key="item.stationCode"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item property="name" label="数据来源" v-if="showAllItems">
            <el-select class="searchItemWidth" v-model="formData.dataSource" filterable>
              <el-option label="全部" :value="2"></el-option>
              <el-option v-for="item in dataSourceList" :label="item.sourceName" :value="item.sourceCode" :key="item.sourceCode"></el-option>
            </el-select>
          </el-form-item>
<!--          <el-form-item label="排序方式">-->
<!--            <el-select v-model="formData.order" placeholder="请选择排序方式" size="small">-->
<!--              <el-option label="倒序" value="desc"></el-option>-->
<!--              <el-option label="顺序" value="asc"></el-option>-->
<!--            </el-select>-->
<!--          </el-form-item>-->
        </el-col>
        <el-col style="margin-bottom:10px;" class="text-right">
          <el-button type="primary" @click="getDataSource" icon="el-icon-search" size="small">查询</el-button>
          <el-button type="primary" @click="showAllItems = !showAllItems" size="small">高级搜索</el-button>
          <el-button @click="reset" size="small">重置</el-button>
          <el-button type="danger" @click="delClick" size="small">删除</el-button>
        </el-col>
      </el-form>
    </el-card>

  <el-table ref="tableData" :data="tableData" key="saleOrder" stripe class="marginTop10" border size="small" v-loading="loading">
    <el-table-column
      type="selection"
      width="50">
    </el-table-column>
    <el-table-column
      type="index"
      width="50" label="序号">
    </el-table-column>
    <el-table-column property="uploadTime" label="任务开始时间" show-overflow-tooltip width="140px"></el-table-column>
    <el-table-column property="inspectTaskCode" label="任务编码" show-overflow-tooltip width="140px"></el-table-column>
    <el-table-column property="oriFileName" label="上传文件名" show-overflow-tooltip></el-table-column>
    <el-table-column property="remark" label="文件描述" show-overflow-tooltip></el-table-column>
    <el-table-column property="picNum" label="图片数量" show-overflow-tooltip width="70px"></el-table-column>
    <el-table-column property="companyName" label="单位名称" show-overflow-tooltip></el-table-column>
    <el-table-column property="stationName" label="场站名称" show-overflow-tooltip></el-table-column>
    <el-table-column property="dataSource" label="数据来源" show-overflow-tooltip width="70px">
      <template slot-scope="scope">
        <span>{{scope.row.dataSource === 0 ? "本地" : "FTP"}}</span>
      </template>
    </el-table-column>
<!--     <el-table-column property="dataPath" label="数据存储路径" show-overflow-tooltip width="300"></el-table-column>-->
    <el-table-column property="date10" label="操作" width="91" >
      <template slot-scope="scope">
<!--        <el-image :ref="'img' + scope.$index"-->
<!--                  :src="srcList[0]"-->
<!--                  style="width: 0px; height: 0px"-->
<!--                  :preview-src-list="[scope.row.dataPath]">-->
<!--        </el-image>-->
<!--        <el-button size="mini" @click="preview('img' + scope.$index)">预览</el-button>-->
        <el-button type="text" size="mini" @click="goto(scope.row)">查看诊断任务</el-button>
      </template>
    </el-table-column>
  </el-table>

    <el-pagination class="text-center marginTop10" @size-change="sizeChange" @current-change="currentChange" :page-size="pageSize" :current-page.sync="page" :page-sizes="[10, 20, 30, 40]" background layout="total, prev, pager, next, sizes, jumper" :total="totalElements">
    </el-pagination>
<!--    {{current}}-->
<!--    {{totalList}}-->
  </el-row>
</template>

<script>
  import dataSourceApi from "../../api/dataSourceApi";
  import stations from "../../api/stations"
  import manual from "../../api/manual";
  import utils from "../../utils/index";
  import moment from 'moment'
  export default {
    name: "dataSourceList",
    data() {
      return {
        loading: false,
        showAllItems: false,
        uploadTime: "",
        tableData: [],
        current: { times: 129, list: [1, 1, 1, 1, 1]},
        totalList: [],
        tree: [],
        stationList: [],
        taskNumberList: [],
        dataSourceList: [{sourceName: "本地", sourceCode: 0}, {sourceName: "FTP", sourceCode: 1}],
        pageSize: 10,
        page: 0,
        totalElements: 0,
        formData: {
          remark: "",
          oriFileName: "",
          companyCode: "",
          stationCode: "",
          taskNumber: "",
          dataSource: 0,
          uploadTime: null,
          order: 'desc'
        },
        counter: [1,1,1,1,1],
        srcList: [
          'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
          'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
        ]
      }
    },
    mounted() {
      this.getCompanyList()
      this.getDataSource()
      this.getTaskNumberByCompany()
    },
    methods: {
      getDataSource() {
        // this.tempFun()
        this.loading = true
        dataSourceApi.getDataSource({
          page: this.page,
          limit: this.pageSize,
          companyCode: this.formData.companyCode,
          stationCode: this.formData.stationCode,
          dataSource: this.formData.dataSource,
          oriFileName: this.formData.oriFileName,
          remark: this.formData.remark,
          inspectTaskCode: this.formData.taskNumber,
          startTime: this.formData.uploadTime? utils.parseTime(this.formData.uploadTime[0], "{y}-{m}-{d} {h}:{i}:{s}") : "",
          endTime: this.formData.uploadTime? utils.parseTime(this.formData.uploadTime[1], "{y}-{m}-{d} {h}:{i}:{s}"): "",
          sidx: 'create_at',
          order: this.formData.order
        }).then(data => {
          this.loading = false
          this.tableData = data.data.data.list.map(item => ({
            ...item,
            uploadTime: item.uploadTime ? moment(item.uploadTime).format('YYYY-MM-DD HH:mm:ss') : ''
          }))
          this.totalElements = data.data.data.totalCount
        }).catch(e => {
          this.loading = false
          this.$message.error({message: e.message ? e.message : e, center: true})
        })
      },
      getCompanyList() {
        stations.getCompanyList().then(res => {
          if (res && res.data.code === 200) {
            this.tree = res.data.data
          }
        }).catch(e => {
          this.$message.error({message: e.message ? e.message : e, center: true})
        })
      },
      stationChange() {
        // this.getTaskNumberByCompany()
        this.formData.taskNumber = ""
      },
      companyChange() {
        this.formData.stationCode = ""
        this.formData.taskNumber = ""
        this.getStationByCompany()
      },
      taskNumberChange() {
        if (!this.formData.taskNumber) {
          this.formData.oriFileName = ""
          this.formData.remark = ""
          return
        }
        // 获取文件名和文件描述
        dataSourceApi.getNameAndRemarkInfo({inspectTaskCode: this.formData.taskNumber}).then(data => {
          this.formData.oriFileName = data.data.data.oriFileName
          this.formData.remark = data.data.data.remark
        }).catch(e => {
            this.$message.error({message: e.message ? e.message : e, center: true})
        })
      },
      getTaskNumberByCompany() {
        manual.listInspectTaskCode({
          companyCode: this.formData.companyCode,
          stationCode: this.formData.stationCode
        }).then(res => {
          if (res && res.status === 200 && res.data.code === 200) {
            this.taskNumberList = res.data.data
          }
        }).catch(e => {
          this.$message.error({message: e.message ? e.message : e, center: true})
        })
      },
      getStationByCompany() {
        manual.getStationByCompany({
          companyCode: this.formData.companyCode
        }).then(res => {
          if (res && res.status === 200 && res.data.code === 200) {
            this.stationList = res.data.data
          }
        }).catch(e => {
          this.$message.error({message: e.message ? e.message : e, center: true})
        })
      },
      // 分页方法
      sizeChange(val) {
        this.pageSize = val
        this.getDataSource()
      },
      currentChange(val) {
        this.page = val
        this.getDataSource()
      },
      preview(imgRef) {
        this.$refs[imgRef].clickHandler()
      },
      reset() {
        this.formData = {
          page: 1,
          limit: 10,
          dataSource: 0,
          sidx: 'create_at'
        }
        this.tableData = []
      },
      delClick() {
        if (this.$refs.tableData.selection && this.$refs.tableData.selection.length <= 0) {
          this.$message.error("请选择删除项")
          return
        }
        this.$confirm('是否确定删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true
        }).then(() => {
          const ids = []
          this.$refs.tableData.selection.map(item => {
            ids.push(item.id)
          })
          dataSourceApi.deleteDatareSourceInfo(ids).then(data => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.getDataSource()
          }).catch(e => {
              this.$message.error({message: e.message ? e.message : e, center: true})
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      goto(row) {
        this.$router.push({
          path: "/diagnosticTask/taskList",
          query: {
            inspectTaskCode: row.inspectTaskCode,
            oriFileName: row.oriFileName
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .dataSourceList1{
    padding: 10px 20px;
    .itemWrap{
      .el-form-item{
      }
    }
    .el-form-item{
      margin-bottom: 3px;
    }
  }
</style>
